{extend name='admin@public/content'}
{block name='style'}
<style>
    .param-table-list {
        overflow: auto;
        max-height: 500px;
        position: relative;
        overflow-y: scroll;
    }

    .param-input-td {
        position: relative;
        padding: 0 !important;
    }

    .param-input-td.one {
        width: 30%;
    }

    .param-input-td.thr {
        width: 20%;
        text-align: center;
    }

    .param-input-td.one:before {
        content: '名称'
    }

    .param-input-td.two:before {
        content: '值'
    }

    .param-input-td:before {
        margin: 4px;
        width: 40px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        background: #e2e2e2;
    }

    .param-input-td input {
        padding-left: 50px;
        border: none !important;
    }
</style>
{/block}
{block name='content'}
<form onsubmit="return false;" action="" data-auto="true" method="post" class='form-horizontal layui-form' style='padding-top:20px'>
    <input type="hidden" name="create_at" value="{:date('Y-m-d H:i:s')}">

    <div class="layui-tab layui-tab-brief" lay-filter="demo">
        <ul class="layui-tab-title" style="padding-left: 10%">
            <li class="layui-this" lay-id="111">封面信息</li>
            <li lay-id="112">内容信息</li>
            <li lay-id="113">详细信息</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="form-group">
                    <label class="col-sm-2 control-label">分类：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <select name="pid[]" class="layui-select" lay-filter="pid">
                            <option value="">请选择</option>
                            {foreach $cate as $v}
                            <option value="{$v.id}">{$v.name}</option>
                            {/foreach}
                        </select>
                        <div class="cate">

                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">搜索关键字：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <input type="text" name="keywords" title="请输入" placeholder="请输入，多个以英文逗号隔开" value="" class="layui-input">
                        <p class="help-block"></p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">标题：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <input type="text" name="title" title="请输入" required placeholder="请输入标题" value="" class="layui-input">
                        <p class="help-block"></p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">封面图：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <input type="hidden" data-width="" data-height="" name="cover" value="">
                        <p class="help-block">上传尺寸</p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">封面描述：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <div id="mbox">
                            <input type="text" name="cover_desc[]" required title="请输入" placeholder="请输入" value="" class="layui-input">
                        </div>
                        <p class="help-block"></p>
                        <button type="button" id="desc_add" class="btn btn-info btn-xs">增加</button>
                        <button type="button" id="desc_del" class="btn btn-info btn-xs">删除</button>
                    </div>
                </div>

                <hr class="layui-bg-black">

                <div class="hr-line-dashed"></div>
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="layui-form-item text-left">
                        <a class="layui-btn next-one">下一步</a>
                    </div>
                </div>
            </div>

            <div class="layui-tab-item">
                <div class="form-group">
                    <label class="col-sm-2 control-label label-required">轮播图：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <input type="hidden" data-width="" data-height="" name="slider" value="">
                        <p class="help-block">上传尺寸</p>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">描述：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <div class="param-table-list">
                            <table class="layui-table margin-none">
                                <tbody class="param-table-list miaoshu">
                                {if empty($desc)}
                                <tr class="transition">
                                    <td class="param-input-td nowrap">
                                        <button data-file="one" data-type="png,jpg,jpeg" data-field="desc[0][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                                    </td>
                                    <td class="param-input-td nowrap text-center">
                                        <img data-tips-image style="height:auto;max-height:38px;" src="__STATIC__/theme/img/image.png"/>
                                        <input type="hidden" name="desc[0][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                                    </td>

                                    <td class="param-input-td one nowrap" style="padding: 0px;">
                                        <input name="desc[0][name]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                                    </td>
                                    <td class="param-input-td two nowrap" style="padding: 0px;">
                                        <input name="desc[0][value]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                                    </td>
                                    <td class="param-input-td thr nowrap text-center">
                                        <a class="color-desc del">删除</a>
                                        <a class="color-desc up">上移</a>
                                        <a class="color-desc down">下移</a>
                                    </td>
                                </tr>
                                {else}
                                {foreach $desc as $dk=>$dv}
                                <tr class="transition">
                                    <td class="param-input-td nowrap">
                                        <button data-file="one" data-type="png,jpg,jpeg" data-field="desc[{$dk}][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                                    </td>
                                    <td class="param-input-td nowrap text-center">
                                        <img data-tips-image style="height:auto;max-height:38px;" src="{$dv.thumb ?: '__STATIC__/theme/img/image.png'}"/>
                                        <input type="hidden" name="desc[{$dk}][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="{$dv.thumb ?: ''}" class="layui-input">
                                    </td>

                                    <td class="param-input-td one nowrap" style="padding: 0px;">
                                        <input name="desc[{$dk}][name]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                                    </td>
                                    <td class="param-input-td two nowrap" style="padding: 0px;">
                                        <input name="desc[{$dk}][value]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                                    </td>
                                    <td class="param-input-td thr nowrap text-center">
                                        <a class="color-desc del">删除</a>
                                        <a class="color-desc up">上移</a>
                                        <a class="color-desc down">下移</a>
                                    </td>
                                </tr>
                                {/foreach}
                                {/if}
                                </tbody>
                            </table>
                        </div>
                        <table class="layui-table">
                            <tr>
                                <td class="text-center notselect padding-none border-none">
                                    <button type="button" class="layui-btn full-width layui-btn-primary add1">添加</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">雷达图设置：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <div class="param-table-list">
                            <table class="layui-table margin-none">
                                <tbody class="param-table-list leida">
                                {if empty($leidatu)}
                                <tr class="transition">
                                    <td class="param-input-td one nowrap" style="padding: 0px;">
                                        <input name="leidatu[0][name]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                                    </td>
                                    <td class="param-input-td two nowrap" style="padding: 0px;">
                                        <input name="leidatu[0][value]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                                    </td>
                                    <td class="param-input-td thr nowrap text-center">
                                        <a class="color-desc del">删除</a>
                                        <a class="color-desc up">上移</a>
                                        <a class="color-desc down">下移</a>
                                    </td>
                                </tr>
                                {else}
                                {foreach $leidatu as $lk=>$lv}
                                <tr class="transition">
                                    <td class="param-input-td one nowrap" style="padding: 0px;">
                                        <input name="leidatu[{$lk}][name]" required placeholder="请输入" title="请输入" value="{$lv.name ?: ''}" class="layui-input" onblur="this.value=this.value.trim()">
                                    </td>
                                    <td class="param-input-td two nowrap" style="padding: 0px;">
                                        <input name="leidatu[{$lk}][value]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                                    </td>
                                    <td class="param-input-td thr nowrap text-center">
                                        <a class="color-desc del">删除</a>
                                        <a class="color-desc up">上移</a>
                                        <a class="color-desc down">下移</a>
                                    </td>
                                </tr>
                                {/foreach}

                                {/if}
                                </tbody>
                            </table>
                        </div>
                        <table class="layui-table">
                            <tr>
                                <td class="text-center notselect padding-none border-none">
                                    <button type="button" class="layui-btn full-width layui-btn-primary add">添加属性</button>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <hr class="layui-bg-black">

                <div class="hr-line-dashed"></div>
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="layui-form-item text-left">
                        <a class="layui-btn next-two">下一步</a>
                    </div>
                </div>
            </div>

            <div class="layui-tab-item">
                <div class="form-group">
                    <label class="col-sm-2 control-label">内容：<span class="nowrap"></span></label>
                    <div class='col-sm-8'>
                        <div class="alert alert-danger">
                            <!--<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>-->
                            <strong>添加课程完成后，在列表中的‘详情内容’中编辑</strong>
                        </div>
                        <p class="help-block"></p>
                    </div>
                </div>

                <hr class="layui-bg-black">

                <div class="hr-line-dashed"></div>
                <div class="col-sm-8 col-sm-offset-2">
                    <div class="layui-form-item text-left">
                        <button class="layui-btn" type="submit" data-confirm="确定保存吗？">保存</button>
                    </div>
                </div>

            </div>
        </div>
    </div>




    <!--<div class="hr-line-dashed"></div>-->

    <!--<div class="col-sm-8 col-sm-offset-2">-->
        <!--<div class="layui-form-item text-left">-->
            <!--<button class="layui-btn" type="submit">保存</button>-->
        <!--</div>-->
    <!--</div>-->
</form>

{/block}
{block name="script"}

<script>
    window.form.render();
    $('[name="cover"]').uploadOneImage();
    $('[name="slider"]').uploadMultipleImage();
    layui.use('element', function(){
        var element = layui.element;
        $('.next-one').click(function () {
            element.tabChange('demo', '112');
        });
        $('.next-two').click(function () {
            element.tabChange('demo', '113');
        });
    });
    form.on('select(pid)',function (data) {
        $.ajax({
            url:'{:url("cate2")}',
            type:'post',
            data:{pid:data.value},
            success:function (res) {
                if(res.code===1){
                    var html_str = '';
                    res.data.forEach(function (i,k,o) {
                        html_str += `<div>`
                           html_str +=`<label class="control-label">${i.name}：</label>`
                            i.children.forEach(function(ii,kk,oo){
                                html_str +=`<input type="checkbox" name="pid[]" value="${ii.id}" title="${ii.name}" lay-skin="primary">`
                            });
                            html_str +=`</div>`;
                    });


                    $('.cate').html(html_str);
                    form.render();
                }else {
                    $('.cate').html('还没有设置分类');
                }
            }
        })
    })

    $('#desc_add').on('click',function () {
        $('#mbox').append('<input type="text" name="cover_desc[]" required title="请输入" placeholder="请输入" value="" class="layui-input">')
    })
    $('#desc_del').on('click',function () {
        if($('#mbox input').length>1){
            $('#mbox input:last').remove()
            // $('#mbox br:last').remove()
        }
    })

    //开始
    var key;
    var k;
    $(function () {
        key = $('.leida .transition').length-1;
        k = $('.leida .transition').length-1;
    })

    //添加
    $('.add1').on('click',function () {
        k++;
        var html_str = `<tr class="transition">
                        <td class="param-input-td nowrap">
                            <button data-file="one" data-type="png,jpg,jpeg" data-field="desc[${k}][thumb]" type="button" class="layui-btn layui-btn-sm" style="height:38px;line-height:38px;width:100%">上传图标</button>
                        </td>
                        <td class="param-input-td nowrap text-center">
                            <img data-tips-image style="height:auto;max-height:38px;" src="__STATIC__/theme/img/image.png"/>
                            <input type="hidden" name="desc[${k}][thumb]" onchange="$(this).prev('img').attr('src', this.value)" value="" class="layui-input">
                        </td>
                        <td class="param-input-td one nowrap" style="padding: 0px;">
                            <input name="desc[${k}][name]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td two nowrap" style="padding: 0px;">
                            <input name="desc[${k}][value]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td thr nowrap text-center">
                            <a class="color-desc del">删除</a>
                            <a class="color-desc up">上移</a>
                            <a class="color-desc down">下移</a>
                        </td>
                    </tr>`;
        $('tbody.miaoshu').append(html_str);
    })

    //雷达图属性添加
    $('.add').on('click',function () {
        key++;
        var html_str = `<tr class="transition">
                        <td class="param-input-td one nowrap" style="padding: 0px;">
                            <input name="leidatu[${key}][name]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td two nowrap" style="padding: 0px;">
                            <input name="leidatu[${key}][value]" required placeholder="请输入" title="请输入" class="layui-input" onblur="this.value=this.value.trim()">
                        </td>
                        <td class="param-input-td thr nowrap text-center">
                            <a class="color-desc del">删除</a>
                            <a class="color-desc up">上移</a>
                            <a class="color-desc down">下移</a>
                        </td>
                    </tr>`;
        $('tbody.leida').append(html_str);
    })

    $('tbody.param-table-list').on('click','.del',function () {
        $(this).parents('.transition').remove();
    })

    $('tbody.param-table-list').on('click','.up',function () {
        var parentsDiv = $(this).parents(".transition");
        var prev = parentsDiv.prev();
        if(prev.html()!=undefined){
            //prev.before(parentsDiv);
            prev.fadeOut("fast",function(){
                $(this).before(parentsDiv);
            }).fadeIn();
        }
    })

    $('tbody.param-table-list').on('click','.down',function () {
        var parentsDiv = $(this).parents(".transition");
        var next = parentsDiv.next();
        if(next.html()!=undefined){
            //next.after(parentsDiv);
            next.fadeOut("fast",function(){
                $(this).after(parentsDiv);
            }).fadeIn();
        }
    })
    //结束
</script>
{/block}